<template>
  <div>
    <radio-group class="radio-group" @change="radioChange">
      <div class="cashier-dz" v-for="(item,index) in addresslist" :key="index">
        <ul @click.stop="selectAddress(item.address_id)">
          <li>{{item.consignee_name}}<span class="fr">{{item.consignee_phone}}</span></li>
          <li class="gray6">{{item.address}}</li>
          <div v-if="item.country_code == '+86'">
            <li v-if="item.audit_status == 'PASSED'">身份证：{{item.address_text}}</li>
            <li class="red45" v-else>{{item.address_text}}</li>
          </div>
        </ul>
        <div class="cashier-dz-oper">
          <label class="radio">
            <radio :value="item.address_id" :checked="item.is_default"/>
            设为默认
          </label>
          <a :href="'/pages/address/main?addressId='+ item.address_id" class="counter">
            <i class="iconfont icon-bianji"></i> 编辑
          </a>
          <span @click="removeDeliveryAddress(item.address_id)"><i class="iconfont icon-shanchu"></i> 删除</span>
        </div>
      </div>
    </radio-group>

    <a href="/pages/address/main">
      <button class="weui-btn" type="default"><i class="iconfont icon-guanzhu"></i> 添加新地址</button>
    </a>
    <placeholder :show.sync="isPageEmpty" :message.sync="emptyMsg" :hidBtn="hidBtn" @tryAgain="onTap" :styleTop="0"/>
  </div>
</template>

<script>
  import {mapActions} from 'vuex'
  import placeholder from '@/components/placeholder'

  export default {
    data() {
      return {
        addresslist: [],
        mainType: '',
        isPageEmpty: false,
        hidBtn: false,
        emptyMsg: '',
      }
    },
    onLoad() {
      this.$wx.setTitleBarTitle('收货地址');
      this.mainType = this.$root.$mp.query.type;
      console.log(this.mainType)
    },
    onShow() {
      this.getdata();
    },
    methods: {
      ...mapActions('cart', [
        'getCarts',
        'checkSettle'
      ]),
      onTap() {
        this.getdata()
      },
      async selectAddress(addressId) {
        if (this.mainType == 'mine') return
        await this.checkSettle({isSettlePage: true, address_id: addressId})
        this.$wx.back(1)
      },
      //设为默认
      radioChange(e) {
        const self = this
        let addressId = e.mp.detail.value
        self.modifyDeliveryAddress(addressId)
      },
      async modifyDeliveryAddress(addressId) {
        const data = await this.$fly.post(this.$url.URL_MODIFYADDRESS, {
          address_id: addressId,
          is_default: 1
        })
      },
      //删除
      async removeDeliveryAddress(addressId) {
        const data = await this.$fly.post(this.$url.URL_REMOVEADDRESS, {
          address_id: addressId
        })
        if (data.successCode === 1) {
          this.getdata()
        }
      },
      //获取列表
      async getdata() {
        const data = await this.$fly.post(this.$url.URL_ADDRESSLIST)
        if (data.successCode === 1) {
          if (this.$wx.isArrayEmpty(data.data) || this.$wx.isArrayEmpty(data.data.delivery_addresses)) {
            this.isPageEmpty = true
            this.hidBtn = false
            this.emptyMsg = '暂无地址数据'
          } else {
            this.addresslist = data.data.delivery_addresses
            this.isPageEmpty = false
          }
        } else {
          this.isPageEmpty = true
          this.hidBtn = false
          this.emptyMsg = data.message
        }
      }
    },
    mounted() {
    },
    components: {
      placeholder
    }
  }
</script>

<style scoped>
  .cashier-dz {
    background: #fff;
    margin: 10px;
  }

  .cashier-dz ul {
    padding: 2%;
    overflow: hidden;
    position: relative;
  }

  .cashier-dz ul li {
    line-height: 22px;
  }

  .cashier-dz-add i {
    float: left;
    margin-right: 8px;
  }

  .cashier-dz-oper {
    border-top: 1px #f2f2f2 solid;
    padding: 2% 0;
    margin: 0 2%;
    text-align: right;
  }

  .cashier-dz-oper label {
    float: left;
  }

  .cashier-dz-oper span, .cashier-dz-oper a {
    margin: 0 2px;
    padding: 0 3px;
    font-size: 0.9em;
    display: inline-block
  }

  .cashier-dz-oper span i, .cashier-dz-oper a i {
    display: inline-block;
    font-size: 16px;
  }

  .cashier-dz-oper span:active {
    background-color: #ccc;
  }

  .weui-btn i {
    display: inline-block
  }
</style>
